<template>
  <!-- 计算属性满足响应式-->
  <button @click="changeNameClick">changeName</button>
  <span>{{ firstName }}-{{ lastName }}</span>
  <hr />
  <!-- methods,使用n次，调用n次-->
  <span>{{ getMyName() }}</span>
  <span>{{ getMyName() }}</span>
  <hr />
  <!-- 计算属性存在缓存,使用n次，调用一次-->
  <span>{{ myName }}</span>
  <span>{{ myName }}</span>
  <hr />
  <button @click="changefullNameClick">changefullName</button>
  <span>计算属性的get和set{{ fullName }}</span>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
      firstName: 'aaa',
      lastName: 'bbb',
    }
  },
  computed: {
    myName: function () {
      console.log('计算属性myName被执行了')
      return this.firstName + '-' + this.lastName
    },
    fullName: {
      get: function () {
        return this.firstName + '-' + this.lastName
      },
      set: function (newValue) {
        this.firstName = newValue
        this.lastName = newValue
      },
    },
  },
  methods: {
    changeNameClick() {
      this.firstName = 'ccc'
    },
    getMyName() {
      console.log('methodsgetMyName被执行了')
      return this.firstName + '-' + this.lastName
    },
    changefullNameClick() {
      // 调用计算属性的set方法
      this.fullName = 111
    },
  },
}
</script>
<style scoped></style>
